<template>
	<view class="">
		<u-tabbar :value="tab" @change="changeTab" :fixed="true" :border="true" :placeholder="true" :safeAreaInsetBottom="true" inactiveColor="#B3B2B2" activeColor="#00DCB6">
			<!--  badge="3" -->
			<u-tabbar-item text="首页" icon="home-fill"></u-tabbar-item>
			<u-tabbar-item text="企业" icon="file-text-fill"></u-tabbar-item>
			<u-tabbar-item>
				<u-icon slot="active-icon" name="plus-circle-fill" size="50" color="#00DCB6"></u-icon>
				<u-icon slot="inactive-icon" name="plus-circle-fill" size="50" color="#00DCB6"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="消息" icon="chat-fill" badge="3"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account-fill"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
	name: 'tabbar',
	props: {
		tab: {
			type: Number,
			require: true
		}
	},
	data() {
		return {
			list: ['/pages/home/home', '/pages/company/company', '/pages/home/home', '/pages/message/message', '/pages/my/my']
		};
	},
	computed: {
		// vuex中的token
		...mapState(['token'])
	},
	methods: {
		changeTab(name) {
			// console.log(88, name);
			// 等于2，代表是点击了+号
			if (name === Number(2)) {
				// 呼出弹出层
				this.$store.commit('changePop', true);
			} else {
				this.$store.commit('changePop', false);

				// 关于token---我的页面展示
				if (name === Number(4) && this.token) {
					this.list[4] = '/pages/my/user/myUser';
				}else{
					this.list[4] = '/pages/my/my'
				}

				// 会关闭所有页面来打开
				uni.reLaunch({
					url: this.list[name]
				});
			}
		}
	}
};
</script>

<style scoped>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	z-index: 99;
}
::v-deep .u-tabbar-item__text {
	font-size: 32rpx;
}
::v-deep .u-icon__icon {
	font-size: 48rpx !important;
}
::v-deep .uicon-plus-circle-fill {
	font-size: 80rpx !important;
}
::v-deep .u-badge {
	font-size: 12rpx !important;
}
</style>
